<template>
  <div class="pageheader">
    <el-page-header @back="$router.back()">
      <template #content>
        <span> {{ info.solution.name }} 方案评价结果 </span>
      </template>
    </el-page-header>
  </div>
  <el-tabs v-model="activeName" type="border-card" class="tabs" :v-loading="true">
    <el-tab-pane v-for="(table, index) in tableDict" :key="index" :label="table.tableName" :name="index">
      <el-scrollbar>
        <table border="1" style="width: 100%">
          <th :colspan="50">{{ table.tableName }}表</th>
          <tr v-if="table.isArray !== 0">
            <td :colspan="2">标号及项目名称</td>
            <td>单位</td>
            <td>合计</td>
            <td :colspan="basicInfo.consYear" v-if="basicInfo.consYear!=undefined && basicInfo.consYear!=0">
              {{ projectType == 4 ? "周期" : "建设期" }}
            </td>
            <td :colspan="basicInfo.operYear" v-if="basicInfo.operYear!=undefined && basicInfo.operYear!=0">运营期</td>
          </tr>
          <tr>
            <td style="width: 30px;text-align: left">标号</td>
            <td>项目</td>
            <td>单位</td>
            <template v-if="table.isArray === 0">
              <td>数据</td>
            </template>
            <template v-else>
              <td v-for="(year, index) in dataSheet[table.indicatorMarks[0]]" :key="index">
                <span v-if="index === 0">合计</span>
                <span v-if="index > 0">
                  {{ projectType == 4 ? index : "第" + index + "年" }}
                </span>
              </td>
            </template>
          </tr>
          <template v-for="(item, index) in table.indicatorMarks" :key="index">
            <tr
                v-if="indicatorDict[item] !== undefined && indicatorDict[item].indicatorName !== '' && indicatorDict[item].indicatorName !== null">
              <td style="text-align: left">
                {{ table.viewMarks[index] }}
              </td>
              <td v-if="indicatorDict[item] !== undefined">
                {{ indicatorDict[item].indicatorName }}
              </td>
              <td v-if="indicatorDict[item] !== undefined">
                {{ indicatorDict[item].unit }}
              </td>
              <td v-else>
                {{ item }}
              </td>
              <template v-if="Object.keys(dataSheet).length != 0">
                <td>
                  {{ dataSheet[item][dataSheet[item].length - 1].toFixed(2) }}
                </td>
                <template v-for="(element, index) in dataSheet[item]" :key="index">
                  <td v-if="index !== dataSheet[item].length - 1">
                    <span v-if="typeof element === 'number' && index !== dataSheet[item].length - 1">
                      <span v-if="ifPercentage(indicatorDict[item].unit)">{{
                          toPercentage(element)
                        }}</span>
                      <span v-else>{{ element.toFixed(2) }}</span>
                    </span>
                  </td>
                </template>
              </template>
              <!-- <template v-else>
              <td v-for="(element, index) in dataSheet[item]" :key="index">
                {{ element.toFixed(2) }}
              </td>
            </template> -->
            </tr>
          </template>
        </table>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane label="敏感性分析" name="a">
      <div>
        <div class="chart"></div>
        <div class="chart"></div>
        <div class="chart"></div>
        <div class="chart"></div>
        <div class="chart"></div>
        <div class="chart"></div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import {ref, reactive} from "vue";
import {
  ElMessage,
} from "element-plus";
import * as echarts from "echarts";
import solutionApi from "@/api/evaluation/solution";
import router from "@/router";
import dictApi from "@/api/evaluation/dict";
import indicatorApi from "@/api/evaluation/indicator";

export default {
  props: {
    projectType: {default: 1, type: Number}
  },
  data() {
    return {
      routeName: router.currentRoute.value.name,
      urlPrefix: "",
      info: {
        project: {
          id: 0,
          name: "",
          projectType: 1,
          description: "",
          createTime: ""
        },
        solution: {}
      },
      activeName: ref(0),
      basicInfo: reactive({
        calcYear: 1,
        consYear: 1,
        operYear: 0,
        transportationFangan: 0,
      }),
      dataSheet: reactive({}),
      tableDict: ref([]),
      indicatorDict: ref({}),
      inputNumberSize: "small"
    }
  },
  methods: {
    getIndicatorDict() {
      dictApi.getIndicators(this.info.solution.id, this.projectType).then((res) => {
        if (res.status === 200 && res.data.code === 200) {
          this.indicatorDict = res.data.data;
        } else {
          ElMessage.error("获取指标字典失败")
        }
      })
    }
    ,
    getTableDict() {
      dictApi.getOutTables(this.info.solution.id, this.projectType).then((res) => {
        if (res.status === 200 && res.data.code === 200) {
          this.tableDict = res.data.data;
        } else {
          ElMessage.error("获取表格字典失败")
        }
        // for (let i of res.data.data) {
        //   if (i.tag === "IN") {
        //     this.tables.push(i);
        //   }
        // }
      })
    }
    ,
    getData() {
      indicatorApi.solutionIndicators(this.info.solution.id).then((res) => {
        if (res.status === 200 && res.data.code === 200) {
          for (let key in res.data.data) {
            this.dataSheet[key] = res.data.data[key];
          }
          if (this.projectType == 1) {
            this.basicInfo.calcYear = this.dataSheet["1.1"][0];
            this.basicInfo.consYear = this.dataSheet["1.2"][0];
            this.basicInfo.operYear = this.dataSheet["1.3"][0];

            // 设置默认值
            this.dataSheet["1.4"] = this.dataSheet["1.4"][0] != 0 ? this.dataSheet["1.4"] : [0.15];
            this.dataSheet["1.8"] = this.dataSheet["1.8"][0] != 0 ? this.dataSheet["1.8"] : [0.046];
            this.dataSheet["4"] = this.dataSheet["4"][0] != 0 ? this.dataSheet["4"] : [0.0672];
          } else if (this.projectType == 2 || this.projectType == 5) {
            this.basicInfo.calcYear = this.dataSheet["X+Y"][0];
            this.basicInfo.consYear = this.dataSheet["X"][0];
            this.basicInfo.operYear = this.dataSheet["Y"][0];
          } else if (this.projectType == 4) {
            this.basicInfo.calcYear = this.dataSheet["X"][0];
            this.basicInfo.consYear = this.dataSheet["X"][0];
          }
          this.getAnalyse();
        } else {
          ElMessage.error("获取指标数据失败")
        }
      })
    },
    getAnalyse() {
      let config = {
        economicIndicatorMarks: [],
        fluctuateRates: [-0.2, -0.1, 0.0, 0.1, 0.2],
        toFluctuateMarks: [],
      };
      if (this.projectType == 1) {
        config = {
          economicIndicatorMarks: ["34", "35", "36", "37"],
          fluctuateRates: [-0.2, -0.1, 0.0, 0.1, 0.2],
          toFluctuateMarks: ["3", "5", "1.10"],
        };
      } else if (this.projectType == 2) {
        config = {
          economicIndicatorMarks: ["61", "62", "63", "64", "65", "66"],
          fluctuateRates: [-0.2, -0.1, 0.0, 0.1, 0.2],
          toFluctuateMarks: ["1.7", "1.8", "1.9", "1.10", "I"],
        };
      } else if (this.projectType == 4) {
        config = {
          economicIndicatorMarks: ["5.1", "5.2"],
          fluctuateRates: [-0.2, -0.1, 0.0, 0.1, 0.2],
          toFluctuateMarks: ["1.2.1", "2.2.1"],
        };
      } else {
        config = {
          economicIndicatorMarks: ["17", "19", "20"],
          fluctuateRates: [-0.2, -0.1, 0.0, 0.1, 0.2],
          toFluctuateMarks: ["2", "4", "5"],
        };
      }

      solutionApi.analyse(this.info.solution.id, config, this.projectType).then((res) => {
        let data = res.data.data
        let ECharts = document.getElementsByClassName("chart");
        let i = 0;
        for (var key in data) {
          let EChart = echarts.init(ECharts[i++])
          let config = {
            title: {text: this.indicatorDict[key].indicatorName},
            tooltip: {},
            xAxis: {
              data: ["80%", "90%", "100%", "110%", "120%",],
            },
            yAxis: {},
            series: [],
          };

          console.log(data[key])
          for (var key2 in data[key]) {
            console.log(data[key][key2])
            let series = {
              name: this.indicatorDict[key2].indicatorName,
              type: "line",
              data: data[key][key2]
            }
            config.series.push(series)
          }

          console.log(config.series)

          // 设置参数
          EChart.setOption(config);
        }


        // const legends = [
        //   "销售收入",
        //   "经营成本",
        //   "固定资产投资"
        // ];
        // for (const key in res.data.data) {
        //   const dt = res.data.data[key];
        //   let series = [];
        //   let j = 0;
        //   for (const i in dt) {
        //     series.push({
        //       data: dt[i],
        //       type: "line",
        //       name: legends[j],
        //     });
        //     j++;
        //   }
        //   chart.initChart(key, titles[key], series, config.fluctuateRates);
        // }
      });
    }
    ,
    // 显示格式
    toPercentage(value) {
      if (value != undefined) {
        const scale = (Math.round(value * 10000) / 100.0).toFixed(2) + "%";
        return scale;
      }
    }
    ,
// 判断是否需要百分比显示
    ifPercentage(unit) {
      return unit != undefined && unit.indexOf("%") !== -1;

    }
  },

  mounted() {
    if (this.projectType == 1) {
      this.urlPrefix = "generic"
    } else if (this.projectType == 2) {
      this.urlPrefix = "infrastructure"
    } else if (this.projectType == 3) {
      this.urlPrefix = "purchase"
    } else if (this.projectType == 4) {
      this.urlPrefix = "repair"
    } else if (this.projectType == 5) {
      this.urlPrefix = "update"
    }
    let proj = window.sessionStorage.getItem(this.urlPrefix + "Project");
    let solu = window.sessionStorage.getItem(this.urlPrefix + "Solution");
    if (proj !== null) {
      this.info.project = JSON.parse(proj);
    } else {
      ElMessage.error("未获取到项目信息！");
    }
    if (solu === null) {
      ElMessage.error("未获取到方案信息！");
    } else {
      this.info.solution = JSON.parse(solu);
    }
    this.getTableDict();
    this.getIndicatorDict();
    if (this.routeName === "solution_edit") {
      this.basicInfoSaved.value = true;
    }
    this.getData();
  }
}

// const initChart = (
//   chartId: string,
//   title: string,
//   series: Array<any>,
//   xAxis: Array<number>
// ) => {
//   const legends = [
//     "经营成本",
//     "销售收入",
//     "固定资产投资"
//   ];
//   const dom = document.getElementById(chartId) as HTMLInputElement;
//   var chart = echarts.init(dom);
//   var option = {
//     title: {
//       text: title,
//     },
//     yAxis: {
//       type: "value",
//     },
//     xAxis: {
//       type: "category",
//       data: xAxis,
//     },
//     legend: {
//       data: legends,
//       x: "center",
//     },
//     tooltip: {
//       trigger: "axis",
//     },
//     series: series,
//     toolbox: {
//       show: true,
//       feature: {
//         mark: { show: true },
//         saveAsImage: {
//           show: true,
//           pixelRatio: 1,
//           title: "保存为图片",
//           type: 'png',
//           lang: ['点击保存']
//         }
//       }
//     }
//   };
//   console.log("optionasdfasdfasdf");
//   console.log(option);
//   chart.setOption(option);
// };

//获取敏感性分析


</script>
<style lang="scss" scoped>
.chart {
  display: inline-block;
  height: 550px;
  width: 1350px;
}

.calbtn {
  margin: 20px;
  width: 300px;
}

.tabs > .el-tabs__content {
  width: 100%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.tabs {
  margin: 20px;
}

.basicInfoForm {
  width: 100%;

  .input {
    width: 300px;
  }

  td {
    .el-form-item {
      margin: 0;
      padding: 0;

      .el-form-item__content {
        margin: 0;
        text-align: center;
      }
    }
  }
}

/*表格样式*/
table {
  width: 100%;
  background: #ffffff;
  margin: 10px auto;
  border-collapse: collapse;
  border: 1px solid #dcdfe6;
  /*border-collapse:collapse合并内外边距
    (去除表格单元格默认的2个像素内外边距*/
}

th,
td {
  height: 25px;
  line-height: 25px;
  padding: 5px;
  text-align: center;
  border: 1px solid #dcdfe6;
  white-space: nowrap;
  border-collapse: collapse;
  -webkit-transition: all 0.5s, padding 0s;
  transition: all 0.5s, padding 0s;
}

th {
  font-weight: normal;
  border-collapse: collapse;
  background-color: #f0f2f5;
}

tr {
  background: #fff;
  -webkit-transition: all 0.5s, padding 0s;
  transition: all 0.5s, padding 0s;
  border-collapse: collapse;
  border: 1px solid #dcdfe6;
}

tr:hover {
  background: #ecf5ff;
}

td:hover {
  background-color: #d9ecff;
}
</style>
